<template>
		<div class="ele-body">
			<el-row class="oneRow">
				<!-- 第一行按钮 -->
					<el-col class="oneCol">
						<el-tooltip content="查询" placement="top-start">
							<vxe-button class="oneButton" @click="selectAll">查询</vxe-button>
						</el-tooltip>
					</el-col>
					<el-col class="oneCol">
						<el-tooltip content="导入" placement="top-start">
							<vxe-button class="oneButton" @click="daoruDj">导入</vxe-button>
						</el-tooltip>
					</el-col>	
			</el-row>
			
			<!-- 第二行按钮 -->
				<el-row class="twoRow">
					<el-col class="twoCol">
						<span class="spanClass">日期：</span>
					<el-date-picker class="twoInput" v-model="djDate" type="date" placeholder="日期"></el-date-picker>
					</el-col>
					<el-col class="twoCol">
						<span class="spanClass">客户：</span>
							<el-select v-model="selectKh"
							placeholder="客户"
							filterable
							remote
							:remote-method="tjcxKh">
								<el-option v-for="item in khList" :key="item.id" :label="item.name" :value="item.id">
									<span style="float: left">{{ item.name}}&nbsp;</span>
									<span style="float: right; color: #666666; font-size: 13px">{{ item.code }}</span>
								</el-option>
							</el-select>
					</el-col>
				</el-row>
				
				<!-- 第三行表格 -->
		<div class="tableDiv">
			<el-row>
				<el-col class="ysy-table1">
					<vxe-toolbar  custom>
						<template v-slot:buttons>
							<el-row class="threeRow">
							<span class="spanClass">备注：</span>
							<vxe-input class="threeInput" v-model="inputBz"></vxe-input>
							</el-row>
						</template>
					</vxe-toolbar>
					<vxe-table 
					auto-resize 
					ref="refTable1"
					border 
					show-header-overflow 
					show-overflow
					highlight-hover-row
					height="90%"
					class="mytable-scrollbar" 
					size="mini"
					highlight-current-row 
					resizable
					:data="table1"
					:loading="spmxLoading"
					:sortable="sortableConfig"
					>
					<vxe-table-column type="checkbox" width="40"></vxe-table-column>
					<vxe-table-column type="seq" title=" " width="40"></vxe-table-column>
					<vxe-table-column field="djrq" title="单据日期" min-width="90" align="center" ></vxe-table-column>
					<vxe-table-column field="djbh" title="单据编号" min-width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="khmc" title="客户" min-width="90" align="center" ></vxe-table-column>
					<vxe-table-column field="spmc" title="商品名称" min-width="90" align="center" ></vxe-table-column>
					<vxe-table-column field="je" title="金额" min-width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="bz" title="备注" min-width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="ce" title="差额" sortable min-width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="khid" title="客户id" min-width="90" align="center" :visible="false" ></vxe-table-column>
					<vxe-table-column field="action" title="操作" min-width="60" align="center">
					<template v-slot="{ row }">
						<vxe-button type="text" status="danger" content="删除" size="mini" @click="table1DelEvent(row)"></vxe-button>
					</template>
					</vxe-table-column>
					<vxe-table-column field="create_time" title="创建时间" min-width="90" align="center" :visible="false"></vxe-table-column>
					</vxe-table>

				</el-col>
			</el-row>
		</div>
	
	</div>
</template>

<script>
	
	
	export default{
	
		data() {
			return{
				djDate:null,
				selectKh:'',
				khList:[],
				table1:[],
				Disabled:false, //是否被禁用
				inputBz:'',
				spmxLoading:false,
				sortableConfig:true,
				sfbl:1
				
			}
		},
	methods:{
		table1DelEvent(row){
			this.$confirm('确定要删除此行结果吗?', '提示', {
				type: 'warning'
			}).then(() => {
			this.$http.post("/scm/scm/xsmx/deleteDj",{
				djbh:row.djbh,
			}).then(res => {
				if(res.data.code == 0){
					this.$message.success(res.data.msg)
					this.selectAll();
				}else{
					this.$message.info(res.data.msg)
				}
			})
		}
		)},
		daoruDj(){
			this.$confirm('如果存在商品确定要覆盖结果吗?', '提示', {
				type: 'warning'
			}).then(() => {
				
			var clickYinru =this.$refs.refTable1.getCheckboxRecords();
			console.log(clickYinru,'clickYinru');
			if(clickYinru.length > 1){
				this.$message.info("请勿同时选择多个单据");
				return;
			}
			if(clickYinru.length == 0){
				this.$message.info("请选择一条数据");
				return;
			}
			
				this.$http.post("/scm/scm/xsmx/daoruDj",{
					djbh: clickYinru[0].djbh
				}).then(res => {
					if(res.data.code == 0){
						this.$message.success(res.data.msg)
						this.$emit('daoruAll',parseInt(clickYinru[0].khid),clickYinru[0].djrq,clickYinru[0].djbh,clickYinru[0].bz);
						
					}else{
						this.$message.info(res.data.msg)
					}
				})
			})
		},
		//条件查询客户
		tjcxKh(kh){
			this.$http.post("/scm/scm/xsmx/khlist",{
				code : kh,
				limit:30
				}).then(res => {
				if(res.data.code === 0){
					this.khList = res.data.data
				}
			})
		},
		selectAll(){
			//查询已存在的商品
			this.$http.post("/scm/scm/xsmx/selectDj",{
				khid : this.selectKh,
				djrq : this.$util.toDateString(this.djDate, 'yyyy-MM-dd'),
			}).then(res => {
				//console.log(res);
				this.table1  = res.data;
				})
			},
		},
		mounted(){
			this.selectAll();
			this.tjcxKh();
		}
	}
</script>

<style scoped>
	.oneRow{
		border-bottom: 1px solid lightgray;
	}
	.oneCol{
		width: 57px;
		
	}
	.oneButton{
		width: 60px;
		height: 30px;
	}
	.twoRow{
		display: flex;
	}
	.twoCol{
		width: 250px;
		margin-top: 10px;
		margin-left: 5px;
	}
	.twoInput{
		height: 30px;
		width: 180px;
	}
	.threeRow{
		margin-left: 5px;
		margin-top: 0px;
	}
	.threeInput{
		width: 85%;
		height: 30px;
	}
	.spanClass{
		font-weight: bold;
	}
	.tableDiv{
		margin-top: 0px;
		height: 100%;
	}
	.ysy-table1 {
		font-weight: 500;
	}
	
	
</style>
